.rui.card.package {

  .enablePkg {
    color: @brand-success;
  }

  .disablePkg {
    color: @gray-light;
  }
}

.pkg-core-class {
  border: 1px solid @brand-primary;
  color: @brand-primary;
  background-color: transparent;
}

.pkg-stable-class {
  border: 1px solid @brand-success;
  color: @brand-success;
  background-color: transparent;
}

.pkg-prerelease-class {
  // background-color: @brand-info;
  border: 1px solid @brand-info;
  color: @brand-info;
  background-color: transparent;
}

.pkg-unstable-class {
  border: 1px solid @brand-warning;
  color: @brand-warning;
  background-color: transparent;
}

.pkg-app-card, .pkg-app-card:hover {
    color: @gray-dark;
    text-decoration: none;
    cursor: pointer;
}

.pkg-app-card .panel-heading {
  text-align: center;
}

// ---
.rui.packages {
  .display(flex);
  .flex-wrap(wrap);
}

.dashboard-packages .rui.card-group .rui.item {
  .display(flex);
  .flex(1 1 auto);
  .flex-direction(column);
  padding: 10px;

  width: 25%;
  max-width: 25%;
  min-width: 300px;

  @media screen and (max-width: @screen-lg-min) {
    width: 33%;
    max-width: 33%;
  }

  @media screen and (max-width: @screen-md-max) {
    width: 33%;
    max-width: 33%;
    min-width: 250px;
  }

  @media screen and (max-width: @screen-sm-max) {
    width: 33%;
    max-width: 33%;
    min-width: 0;
  }

  @media screen and (max-width: @screen-xs-max) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

.page.show-settings .dashboard-packages .rui.card-group .rui.item {
  width: 33%;
  max-width: 33%;

  @media screen and (max-width: @screen-lg-min) {
    width: 50%;
    max-width: 50%;
  }

  @media screen and (max-width: @screen-md-max) {
    width: 100%;
    max-width: 100%;
    min-width: 250px;
  }

  @media screen and (max-width: @screen-sm-max) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  @media screen and (max-width: @screen-xs-max) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
